<div class="page-header">
	<h1>User Profile Page <small><i class="ace-icon fa fa-angle-double-right"></i> with inline editable feature</small></h1>
</div>


<div class="clearfix">
	<uib-alert type="success" close="alert.close()" ng-if="alert.shown" class="no-margin">
		<i class="ace-icon fa fa-umbrella bigger-120 blue"></i> Click on the image below or on profile fields to edit them
	</uib-alert>
</div>


<div class="hr dotted"></div>


<div id="user-profile-1" class="user-profile row">

	<div class="col-xs-12 col-sm-3 center">
		<div>
			<!-- #section:pages/profile.picture -->
			<span class="profile-picture">
				<img id="avatar" editable options="avatar.options" ng-model="avatar.value" class="img-responsive" alt="Alex's Avatar" ng-src="{{ace.path.assets}}/avatars/profile-pic.jpg" />
			</span>
			<!-- /section:pages/profile.picture -->
			
			<div class="space-4"></div>
			
			<div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right" uib-dropdown>
			    <a href="" uib-dropdown-toggle class="user-title-label dropdown-toggle">
					<i class="ace-icon fa fa-circle light-green"></i>
					&nbsp;<span class="white">Alex M. Doe</span>
				</a>
				<ul uib-dropdown-menu class="align-left dropdown-menu dropdown-caret dropdown-lighter">
					<li class="dropdown-header">
						Change Status
					</li>
					<li>
						<a href="">
							<i class="ace-icon fa fa-circle green"></i>&nbsp;
							<span class="green">Available</span>
						</a>
					</li>
					<li>
						<a href="">
							<i class="ace-icon fa fa-circle red"></i>&nbsp;
							<span class="red">Busy</span>
						</a>
					</li>
					<li>
						<a href="">
							<i class="ace-icon fa fa-circle grey"></i>&nbsp;
							<span class="grey">Invisible</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="space-6"></div>
		
		<!-- #section:pages/profile.contact -->
		<div class="profile-contact-info">
			<div class="profile-contact-links align-left">
				<a href="" class="btn btn-link">
					<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>
					Add as a friend
				</a>

				<a href="" class="btn btn-link">
					<i class="ace-icon fa fa-envelope bigger-120 pink"></i>
					Send a message
				</a>

				<a href="" class="btn btn-link">
					<i class="ace-icon fa fa-globe bigger-125 blue"></i>
					www.alexdoe.com
				</a>
			</div>
			
			<div class="space-6"></div>
			
			<div class="profile-social-links align-center">
				<a href="" class="tooltip-info" title="" data-original-title="Visit my Facebook">
					<i class="middle ace-icon fa fa-facebook-square fa-2x blue"></i>
				</a>
				<a href="" class="tooltip-info" title="" data-original-title="Visit my Twitter">
					<i class="middle ace-icon fa fa-twitter-square fa-2x light-blue"></i>
				</a>
				<a href="" class="tooltip-error" title="" data-original-title="Visit my Pinterest">
					<i class="middle ace-icon fa fa-pinterest-square fa-2x red"></i>
				</a>
			</div>
		</div>
		<!-- /section:pages/profile.contact -->
		
		<div class="hr hr12 dotted"></div>

		<!-- #section:custom/extra.grid -->
		<div class="clearfix">
			<div class="grid2">
				<span class="bigger-175 blue">25</span>
				<br />
				Followers
			</div>
			
			<div class="grid2">
				<span class="bigger-175 blue">12</span>
				<br />
				Following
			</div>
		</div>
		<!-- /section:custom/extra.grid -->
		<div class="hr hr16 dotted"></div>
	</div>


	<div class="col-xs-12 col-sm-9">
		<div class="center">
			<span class="btn btn-app btn-sm btn-light no-hover">
				<span class="line-height-1 bigger-170 blue">
					1,411
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Views
				</span>
			</span>
			<span class="btn btn-app btn-sm btn-yellow no-hover">
				<span class="line-height-1 bigger-170">
					32
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Followers
				</span>
			</span>
			<span class="btn btn-app btn-sm btn-pink no-hover">
				<span class="line-height-1 bigger-170">
					4
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Projects
				</span>
			</span>
			<span class="btn btn-app btn-sm btn-grey no-hover">
				<span class="line-height-1 bigger-170">
					23
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Reviews
				</span>
			</span>
			<span class="btn btn-app btn-sm btn-success no-hover">
				<span class="line-height-1 bigger-170">
					7
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Albums
				</span>
			</span>
			<span class="btn btn-app btn-sm btn-primary no-hover">
				<span class="line-height-1 bigger-170">
					55
				</span>
				<br>
				<span class="line-height-1 smaller-90">
					Contacts
				</span>
			</span>
		</div>

		<div class="space-12"></div>
		
		<!-- #section:pages/profile.info -->
		<div class="profile-user-info profile-user-info-striped">
			<div class="profile-info-row">
				<div class="profile-info-name">
					Username
				</div>
				
				<div class="profile-info-value">
					<span editable options="username.options" ng-model="username.value" ng-bind="username.value"></span>
				</div>
			</div>
			
			<div class="profile-info-row">
				<div class="profile-info-name">
					Location
				</div>
				
				<div class="profile-info-value">
					<i class="ace-icon orange fa fa-map-marker"></i>
					<span editable options="country.options" ng-model="country.value"></span>
					<span editable options="city.options" ng-model="city.value"></span>
				</div>
			</div>
			
			<div class="profile-info-row">
				<div class="profile-info-name">
					Age
				</div>
				
				<div class="profile-info-value">
					<span editable options="age.options" ng-model="age.value" ng-bind="age.value"></span>
				</div>
			</div>
			
			<div class="profile-info-row">
				<div class="profile-info-name">
					Signup
				</div>
				
				<div class="profile-info-value">
					<span editable options="signup.options" ng-model="signup.value" ng-bind="signup.value"></span>
				</div>
			</div>
			
			<div class="profile-info-row">
				<div class="profile-info-name">
					Login
				</div>
				
				<div class="profile-info-value">
					<span editable options="login.options" ng-model="login.value" ng-bind="login.value"></span>
				</div>
			</div>
			
			<div class="profile-info-row">
				<div class="profile-info-name">
					About
				</div>
				
				<div class="profile-info-value">
					<span editable options="about.options" ng-model="about.value" ng-bind="about.value"></span>
				</div>
			</div>
		</div>
		<!-- /section:pages/profile.info -->

		<div class="space-20"></div>
		
		<div widget-box class="widget-box transparent" wb-reloading='is_activity_reloading' on-reload='activity_reload()'>
			<div class="widget-header widget-header-small">
				<h4 class="widget-title blue smaller"><i class="ace-icon fa fa-rss orange"></i> Recent Activities</h4>
				<div class="widget-toolbar action-buttons">
					<a href="" data-action="reload"><i class="ace-icon fa fa-refresh blue"></i></a>&nbsp;
					<a href="" class="pink"><i class="ace-icon fa fa-trash-o"></i></a>
				</div>
			</div>
			
			<div class="widget-body">
			 <div class="widget-main padding-8">
				<!-- #section:pages/profile.feed -->
				<div ace-scroll options="activityScroll">
				 <div ng-repeat="activity in ::getData('activity')" class="profile-feed">
					<div ng-repeat="item in activity" class="profile-activity clearfix">
						<div>
							<img ng-if="item.avatar" class="pull-left" alt="{{item.name}}'s avatar" ng-src="{{ace.path.assets}}/avatars/{{item.avatar}}" />
							<i ng-if="item.icon" class="pull-left thumbicon {{item.icon}} no-hover"></i>
							<a class="user" href="" ng-bind="item.name"></a>
							<span ng-bind-html="item.action"></span>
							<div class="time"><i class="ace-icon fa fa-clock-o bigger-110"></i> <span ng-bind="item.time"></span></div>
						</div>
						<div class="tools action-buttons">
							<a href="" class="blue"><i class="ace-icon fa fa-pencil bigger-125"></i></a>
							<a href="" class="red"><i class="ace-icon fa fa-times bigger-125"></i></a>
						</div>
					</div>
				 </div>
				</div>
				<!-- /section:pages/profile.feed -->
			 </div>
			</div>
		</div>

		<div class="hr hr2 hr-double"></div>
		<div class="space-6"></div>
		<div class="center">
			<button type="button" class="btn btn-sm btn-primary btn-white btn-round">
				<i class="ace-icon fa fa-rss bigger-150 middle orange2"></i>
				<span class="bigger-110">View more activities</span>
				<i class="icon-on-right ace-icon fa fa-arrow-right"></i>
			</button>
		</div>
	</div>

</div>


